
<script setup>
import {ref, reactive, inject, watch} from 'vue'; // 导入 Vue 3 相关的模块
import { useRoute } from "vue-router";
import {AddtoCartService,GetItemsService} from '@/api/catalog'
import {ElMessage} from "element-plus";
const items = ref([]);
const route = useRoute()
const prodId=reactive(route.query.productId);
const category=reactive(route.query.category);
const isSearch = inject('isSearch')
isSearch.value=true;
// 使用异步操作获取后端数据，并将其赋值给 items 变量
const GetItem=async ()=>{
  const data = await GetItemsService(route.query.productId); // 通过 fetchItemData() 函数获取数据
  if(data.status==1){
    items.value = data.data; // 将获取到的数据赋值给 items 变量
    console.log(data);
  }else {
    ElMessage.error('获取item失败');
  }


}
// onMounted(async () => {
//   try {
//     // 假设你通过某种方式获取到了 ItemData 数据
//
// });
GetItem();

async function AddToCart(itemId) {
  let res = await AddtoCartService(itemId);
  alert(res.message);
}
watch(
    () => route.query.productId,
    (newCategory) => {
      console.log('category'+newCategory)
      GetItem();
    }
);
</script>

<template>
  <div id="show">
    <div id="BackLink">
      <router-link :to="{path:'/categoryForm',query:{category:category}}">Return to {{ category }}</router-link>
    </div>

<!--    <div id="petName"> {{product.name}} </div>-->
    <div id="petName"> {{ prodId}} </div>
    <div class="Form">
      <table class="showGoods">
        <title>      {{ prodId}}</title>
        <thead id="head">
        <th>Item ID</th>
        <th>Product ID</th>
        <th>Description</th>
        <th>List Price</th>
        <th>operate</th>
        </thead>
        <tr  v-for="item in items" :key="item.itemid">
          <td>
            <router-link :to="{path:'/itemForm',query:{itemId:item.itemid,category:category}}"> {{item.itemid}} </router-link></td>
          <td>
           {{ item.productid}}
          </td>
          <td>{{item.attr1}}</td>
          <td> {{item.listprice }} </td>
          <td><button @click="AddToCart(item.itemid)">add to cart</button> </td>
        </tr>
<!--        <tr>-->
<!--          <td>-->
<!--            <router-link to="/itemForm" replace="">itemid</router-link></td>-->
<!--          <td>-->
<!--             item.productId-->
<!--          </td>-->
<!--          <td> item.description </td>-->
<!--          <td> item.price </td>-->
<!--          <td><button @click="AddToCart('EST-11')">add to cart</button> </td>-->
<!--        </tr>-->

      </table>
    </div>
  </div>
</template>

<style>
Button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background-color:#005e21;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  border: none;
  font-size: medium;
  font-weight: bold; /* 设置字体加粗 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 添加文本描边 */
}

Button:hover {
  background-color:#54c07a;
  border: none;
  color: #333;
  text-shadow: 1px 1px 2px white; /* 添加文本描边 */
}
#petName{
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  color: #146e34;
  padding: 10px;
}
</style>